<template>
    <div class="add-wrap">
        <el-card>
            <template #header>
                <span>添加账号</span>
            </template>
            <el-form label-width="80px">
                <el-form-item label="账户名">
                    <el-input v-model="addFormData.account" placeholder="输入添加的账号"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="addFormData.password" placeholder="输入添加的密码"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="addFormData.role" placeholder="选择角色">
                        <el-option label="管理员" value="admin" />
                        <el-option label="普通员工" value="normal" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addSubmit">添加</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { _userAdd } from "@/api/users";
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";


let addFormData = reactive<userAddData>({
    "account": "",
    "password": "",
    "role": ""
})

let $router = useRouter()
let addSubmit = async () => {
    console.log(addFormData);
    let res = await _userAdd(addFormData)
    console.log(res, 43);
    if (res.data.code == 0) {
        // 添加成功之后，提示，跳转列表页面

        ElMessage({
            message: res.data.msg,
            type: 'success',
        })

        $router.push("/user/list")

    }
}
</script>

<style scoped lang="scss">
.add-wrap {
    .el-input {
        width: 200px;
    }
}
</style>